<template>
  <q-layout view="hHh LpR lFf">
    <!--    <div class="q-pa-md">-->
    <!--      <q-ajax-bar-->
    <!--        ref="bar"-->
    <!--        position="top"-->
    <!--        color="negative"-->
    <!--        size="8px"-->
    <!--        skip-hijack-->
    <!--      />-->
    <!--    </div>-->
    <q-header bordered class="bg-primary text-white" height-hint="98">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toolbarclick" />

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
          </q-avatar>
          <router-link to="/" tag="span" class="tag">
            云南危化物品管理
          </router-link>
        </q-toolbar-title>
      </q-toolbar>

      <!--      <q-tabs align="left">-->
      <!--        <q-route-tab to="/page1" label="Page One" />-->
      <!--        <q-route-tab to="/page2" label="Page Two" />-->
      <!--        <q-route-tab to="/page3" label="Page Three" />-->
      <!--      </q-tabs>-->
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      side="left"
      :no-swipe-close="false"
      :no-swipe-open="false"
      :show-if-above="false"
      :width="250"
      content-class="bg-grey-3"
      bordered
    >
      <q-list>
        <q-item-label header class="text-grey-8">
          后台管理菜单
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          @clickHeadAction="clickHeadAction(link.title)"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import EssentialLink from "components/EssentialLink.vue";

const linksData = [
  {
    title: "商户管理",
    caption: "按照名字可进行检索",
    icon: "business",
    target: "/Spgl"
  },
  {
    title: "订单管理",
    caption: "管理销售订单",
    icon: "ballot",
    target: "/Ddgl"
  },
  {
    title: "商品管理",
    caption: "管理商品库存",
    icon: "drafts",
    target: "/Kcgl"
  },
  {
    title: "用户管理",
    caption: "管理后台用户",
    icon: "people",
    target: "/Dygl"
  }
];
import { find, isEmpty } from "lodash";

export default {
  name: "MainLayout",
  components: { EssentialLink },
  computed: {
    titleState: {
      get() {
        return this.$store.state.module.pageTitle;
      },
      set(val) {
        this.$store.commit("module/upPageTitle", val);
      }
    }
  },
  data() {
    return {
      leftDrawerOpen: true,
      essentialLinks: linksData,
      title: ""
    };
  },
  created() {
    let target = this.$route.path;
    let obj = find(linksData, { target });
    if (!isEmpty(obj)) {
      this.titleState = obj.title;
    }
  },
  watch: {
    $route: function(val) {}
  },
  methods: {
    toolbarclick() {
      this.leftDrawerOpen = true;
    },
    clickHeadAction(str) {
      this.titleState = str;
    }
  }
};
</script>

<style scoped lang="scss">
.q-page-container {
  & > div {
    height: calc(100vh - 58px);
    display: flex;
  }
}
.tag {
  cursor: pointer;
}
.my-card {
  width: 100%;
}
.pagecont {
  padding: 3px;
  flex: 1;
}
</style>
